<script lang='ts' setup>

import { reactive } from 'vue'
import { start_task } from '@/apis/toolbox/downloader/start_task.ts'

const emits = defineEmits(['update:show', 'started'])

const props = defineProps({
  show: { required: true, type: Boolean }
})

const state = reactive<{ url: string, timeout: number, target: number, path: string, starting: boolean }>({ url: '', timeout: 1, target: 1, path: 'downloader/', starting: false })

async function close(): Promise<void> {
  state.target = 1
  emits('update:show', false)
}

async function start(): Promise<void> {
  if ('' == state.url.trim()) {
    window.$message.warning('文件链接不能为空')

    return
  }

  const url = new URL(state.url)
  if (!url.protocol.toLowerCase().startsWith('http')) {
    window.$message.warning('下载器只能下载网络上的HTTP资源')

    return
  }

  state.starting = true
  const response = await start_task(state.url, state.target, state.path, state.timeout)
  state.starting = false

  if (0 !== response.code) {
    window.$message.error(response.message)

    return
  }

  window.$message.success('添加任务成功，请等待下载完成')
  emits('started', response.data)
  await close()
}
</script>

<template>
  <n-modal :show='props.show' class='downloader-start-modal' transform-origin='center' @update:show='close'>
    <n-card>
      <n-space vertical>
        <n-divider>添加离线下载任务</n-divider>
        <div>
          <n-input-group>
            <n-input-group-label size='small'>文件链接</n-input-group-label>
            <n-input v-model:value='state.url' placeholder='输入目标文件链接' size='small' />
          </n-input-group>
        </div>
        <n-divider>选项</n-divider>
        <div>
          <n-space :wrap-item='false' align='center'>
            <div>保存至</div>
            <div>
              <n-radio-group v-model:value='state.target'>
                <n-radio :value='1'>资源管理器</n-radio>
                <n-radio :value='2'>临时文件</n-radio>
              </n-radio-group>
            </div>
            <template v-if='1 === state.target'>
              <div class='flex-max'>
                <n-input-group>
                  <n-input-group-label size='small'>路径</n-input-group-label>
                  <n-input v-model:value='state.path' placeholder='保存到资源管理器的路径，多级路径以/分割' size='small' />
                </n-input-group>
              </div>
            </template>
            <template v-if='2 === state.target'>
              <div class='flex-max'>
                <n-input-group>
                  <n-input-group-label size='small'>文件有效期</n-input-group-label>
                  <n-input-number v-model:value='state.timeout' class='width-max' max='30' min='1' placeholder='下载后的文件在服务器的缓存时间' size='small' />
                  <n-input-group-label size='small'>天</n-input-group-label>
                </n-input-group>
              </div>
            </template>
          </n-space>
        </div>
        <div>
          <n-button :loading='state.starting' class='width-max' size='small' type='primary' @click='start'>开始</n-button>
        </div>
      </n-space>
    </n-card>
  </n-modal>
</template>

<style scoped>
.downloader-start-modal {
  width: 65vw;
  height: 360px;
}
</style>
